<template>
	<view class="">
		<view class="kuang">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</view>
		<view class="kuang">
			<view class="one fl_ju">
				<view class="">
					<text class="staer">自提</text>
					<text class="bianhao">订单编号:0201093019012</text>
				</view>
				<view class="type">
					已完成
				</view>
			</view>
			<view class="haibao">
				<image src="../../static/signImages/ziti.png" mode=""></image>
			</view>
			<view class="fl_ju">
				<text class="time">2024-04-13 16:01:01</text>
				<view class="shu">
					<text class="time">共1件</text> <text class="qian">¥6</text>
				</view>
			</view>
			<view class="" style="	display: flex;
		justify-content: flex-end;">
				<view class="btn">
					<u-button text="再来一单" size="small" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view>

			</view>
		</view>
		<view class="kuang">
			<view class="one fl_ju">
				<view class="">
					<text class="staer">自提</text>
					<text class="bianhao">订单编号:0201093019012</text>
				</view>
				<view class="type2">
					待付款
				</view>
			</view>
			<view class="haibao">
				<image src="../../static/signImages/ziti.png" mode=""></image>
			</view>
			<view class="fl_ju">
				<text class="time">2024-04-13 16:01:01</text>
				<view class="shu">
					<text class="time">共1件</text> <text class="qian">¥6</text>
				</view>
			</view>
			<view class="" style="	display: flex;
		justify-content: flex-end;">
				<view class="btn" style="margin-right: 22rpx;">
					<u-button text="取消订单" size="small" color="#AAAAAA"></u-button>
				</view>
				<view class="btn">
					<u-button text="去付款" size="small" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部订单',
				}, {
					name: '自提订单',
				}, {
					name: '外卖订单'
				}]
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.one {
		.staer {
			font-size: 24rpx;
			color: #FF4A4A;
			margin-right: 20rpx;
		}

		.bianhao {
			color: #090909;
			font-size: 24rpx;
		}

		.type {
			color: #AAAAAA;
			font-size: 26rpx;
		}

		.type2 {
			color: #3AA3FF;
			font-size: 26rpx;
		}
	}

	.haibao {
		width: 150rpx;
		height: 150rpx;

		image {
			width: 100%;
			height: 100%;
		}

		margin: 15rpx 0;
	}

	.time {
		color: #AAAAAA;
		font-size: 24rpx;
	}

	.qian {
		color: #FF4A4A;
		font-size: 30rpx;
	}

	.btn {
		width: 200rpx;
		margin-top: 13rpx;

	}
</style>